'use strict';

// 获取所有角色的函数，根据keyword是否存在，来过滤指定内容
function getData(keyword) {
    // 拿到代表table的那个节点
    let tbRole = $('#tbRole');
    //  找到所有的id以role开头的节点
    let tr = $('[id^="role"]');
    // 全部移除
    tr.remove();
    let url = `http://de.ziqiangdeheshan.love/roles`
    if (keyword) {
        url = url + '?keyword=' + keyword;
    }
    // 向后端api接口发起请求，拿到数据,插入指定的html片段到前面获得的table节点
    $.ajax({
        type: 'get',
        url: url,
        success: function (res) {
            // console.log(res);

            res.forEach(item => {
                let html = `<tr id="role${item.id}">
                <td>${item.id}</td>
                <td>${item.rolename}</td>
                <td>${item.avatar}</td>
                <td>
                    <input type="button" value="编辑" onclick="btnEdit(${item.id})">
                    <input type="button" value="删除" onclick="btnDel(${item.id})">
                </td>
              </tr>`
                tbRole.append(html);
            })

        }
    })
}

// 当页面的基本结构（dom树）加载完成的时候，触发此事件，此事件触发发调用函数，函数中，执行获取数据的函数
$(function () {
    getData();
})
// 新增
function btnAdd() {
    location.href = 'roleEdit.html'
}
// 编辑，跳转到指定编辑页
function btnEdit(id) {
    location.href = 'roleEdit.html?id=' + id
}
// 过滤指定内容
function btnFilter() {
    console.log('1111');
    let keyword = $('[name=keyword]').val();
    getData(keyword);
}
// 前端发起请求，删除指定id的记录，如果成功，则在前端移除指定行
function btnDel(id) {
    if (confirm('确认删除吗？')) {
        $.ajax({
            type: 'delete',
            url: 'http://de.ziqiangdeheshan.love/roles/' + id,
            success: function (res) {
                console.log(res);
                $('#role' + id).remove();
            }
        })
    }
}
